你是否注意到，很多前端工程师对 File 和 Blob API 的认知停留在"上传文件"和"下载文件"这个表面？但如果我告诉你，掌握这两个 API 的细节差异，能让你用纯前端完成：大文件断点续传、客户端图片处理、完全离线的数据导出、甚至 P2P 文件传输——听起来是不是有点夸张？

事实上，字节跳动、阿里巴巴这样的大厂在构建 Web 应用时，都深度依赖这两个看似简单的 API。而很多中小团队却把它当成"学过就行"的基础知识。

今天我们不聊"如何上传文件"，而是深度剖析 File 和 Blob 的本质差异、内存管理的陷阱、以及在生产环境中真正的应用设计。

第一部分：你真的理解 File 和 Blob 吗？

Blob 是什么？换个角度理解

如果用现实中的比喻，**Blob（Binary Large Object）就像一个"已经打好的包裹"**——它包含了原始的二进制数据，但对这份数据的来源、用途、名字都一无所知。

?? Blob = 原始二进制数据 + MIME 类型
                - 不知道文件名
                - 不知道修改时间
                - 不知道来自哪个文件

而 **File 则像是"贴了标签的包裹"**：

?? File = Blob + 元数据
                - 包含 name（文件名）
                - 包含 lastModified（修改时间戳）
                - 通常来自用户交互（选文件、拖拽等）

关键认知：File 继承自 Blob，所以每个 File 都是 Blob，但不是每个 Blob 都是 File。

// File 是 Blob 的子类
        const file = new File(['hello'], 'test.txt', { lastModified: Date.now() });
        console.log(file instanceof Blob);  // ?? true
        console.log(file instanceof File);  // ?? true
        // 但反过来不行
        const blob = new Blob(['hello'], { type: 'text/plain' });
        console.log(blob instanceof File);  // ?? false

内存视角：它们到底住在哪里？

这是很多人遗漏的关键点——当你从 <input type="file"> 或拖拽获得 File 对象时，浏览器不是真的把文件内容加载到内存里。

浏览器的处理流程：
        ┌─────────────────────────┐
        │  用户选择文件           │
        └────────────┬────────────┘
                     │
                     ▼
        ┌─────────────────────────┐
        │  浏览器创建 File 对象    │  ??─ 关键！只是元数据 + 引用
        │  ├─ name                │
        │  ├─ size                │
        │  ├─ type                │
        │  └─ lastModified        │
        └────────────┬────────────┘
                     │
                     ▼
        ┌─────────────────────────┐
        │  真实文件数据仍在磁盘上  │  ??─ 尚未加载到内存
        │  （或被浏览器缓冲）     │
        └─────────────────────────┘

只有当你显式调用读取方法（如 FileReader 或 stream()）时，才会真正读取数据。这个设计的核心目的是安全：防止恶意 JavaScript 任意访问用户的文件系统。

第二部分：FileReader — 读取的艺术

基础用法（你可能只知道这些）

当用户选择文件时，最常见的操作：

<input type="file" id="fileInput" />

const input = document.getElementById("fileInput");
        input.addEventListener("change", () => {
          const file = input.files[0];
          
          console.log(`?? 文件名: ${file.name}`);
          console.log(`?? 大小: ${(file.size / 1024).toFixed(2)} KB`);
          console.log(`?? 类型: ${file.type}`);
        });

读取方式的本质区别

FileReader 提供多种读取方式，但底层逻辑完全不同：

读取方式	返回值	使用场景	性能表现
`readAsText()`	String	纯文本、JSON、CSV	需要字符编码转换
`readAsDataURL()`	Data URL	图片预览、Base64 传输	???? 会膨胀 33%
`readAsArrayBuffer()`	ArrayBuffer	二进制处理、加密、图像处理	高效，直接操作内存
`readAsArrayBuffer() + TextDecoder`	String	纯文本（推荐方案）	更快，避免 FileReader 开销

陷阱 1：Data URL 的隐性成本

很多人用 readAsDataURL() 做图片预览，以为这样"轻量级"：

// ?? 常见的"快速方案"
        reader.onload = () => {
          const img = document.createElement("img");
          img.src = reader.result;  // 这是一个超长的 Data URL
          document.body.appendChild(img);
        };
        reader.readAsDataURL(file);

问题在于：Data URL 会增加约 33% 的数据体积（因为 Base64 编码）。一个 3MB 的图片经过 readAsDataURL()，字符串会膨胀到 4MB。

更好的做法：

// ?? 推荐方案：使用 Object URL
        const url = URL.createObjectURL(file);
        const img = document.createElement("img");
        img.src = url;
        document.body.appendChild(img);
        // 重要！不用时释放，否则内存泄漏
        img.onload = () => URL.revokeObjectURL(url);

性能对比（以 3MB 图片为例）：

readAsDataURL(): 产生 4MB 字符串，绑定到 DOM，内存持续占用

Object URL: 浏览器内部优化，内存占用最小，不需要字符串化

陷阱 2：FileReader 的异步陷阱

const reader = new FileReader();
        reader.onload = () => {
          console.log("?? 读取完成");
        };
        reader.readAsText(file);
        console.log("?? 读取中...");  // 这行会先执行！

FileReader 是完全异步的，没有 Promise 支持（在较新的浏览器中可以使用 File.text() 等现代 API）。如果你需要处理多个文件，很容易陷入回调地狱。

现代方案：

// ?? 使用 File API 的现代方法（已被大多数浏览器支持）
        asyncfunction readFileAsText(file) {
        returnawait file.text();
        }
        asyncfunction readFileAsBuffer(file) {
        returnawait file.arrayBuffer();
        }
        // 使用示例
        const file = input.files[0];
        const content = await readFileAsText(file);
        console.log(content);

第三部分：Blob 的真正超能力

场景 1：客户端生成文件并下载

这是字节跳动、阿里云那样的平台常见的需求——用户点击"导出数据"，前端直接生成 CSV、JSON、甚至 PDF，不需要任何后端参与。

// 导出 CSV 的完整示例
        function exportToCSV(data) {
        // 1???? 构造 CSV 字符串
        const csvContent = data
            .map(row =>Object.values(row).join(','))
            .join('\n');
        // 2???? 创建 Blob
        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
        // 3???? 生成临时 URL
        const url = URL.createObjectURL(blob);
        // 4???? 触发下载
        const link = document.createElement('a');
          link.setAttribute('href', url);
          link.setAttribute('download', `data_${Date.now()}.csv`);
          link.style.visibility = 'hidden';
        document.body.appendChild(link);
          link.click();
        // 5???? 清理资源
        document.body.removeChild(link);
          URL.revokeObjectURL(url);
        }
        // 使用
        const mockData = [
          { name: '小明', age: 28, city: '北京' },
          { name: '小红', age: 26, city: '上海' },
          { name: '小刚', age: 30, city: '深圳' }
        ];
        exportToCSV(mockData);

为什么这很强大：

?? 不依赖服务器，减少网络往返（在字节的数据分析平台中广泛使用）

?? 对隐私敏感的数据，处理不离开浏览器

?? 用户选择"导出"到"下载完成"的延迟最小化

场景 2：构造 File 对象，与后端 API 兼容

很多时候，你的后端 API 期望接收 FormData 里的 File 对象。但你的数据来自：

网络请求返回的 Blob

动态生成的内容

Canvas 绘制的图片

解决方案：从 Blob 构造 File

// 场景：从网络获取图片，要上传到另一个服务
        asyncfunction transferImage(imageUrl) {
        // 1???? 获取图片作为 Blob
        const response = await fetch(imageUrl);
        const imageBlob = await response.blob();
        // 2???? 从 Blob 创建 File
        const imageFile = new File(
            [imageBlob],
            'transferred_image.jpg',
            { type: imageBlob.type, lastModified: Date.now() }
          );
        // 3???? 通过 FormData 上传（与标准上传无区别）
        const formData = new FormData();
          formData.append('file', imageFile);
        const uploadRes = await fetch('/api/upload', {
            method: 'POST',
            body: formData
          });
        returnawait uploadRes.json();
        }

关键点：服务器无法区分这个 File 是用户选择的，还是前端动态创建的。这就是 File API 的灵活性——它打破了"文件必须来自用户"的认知。

场景 3：二进制数据的网络传输

当你从网络获取二进制文件（如 PDF、音频、视频）时，如果直接让浏览器处理，可能会触发下载或渲染。但有时你需要检查、处理或转发这个数据：

// 获取 PDF，而不让浏览器默认下载
        asyncfunction fetchAndPreviewPDF(pdfUrl) {
        const response = await fetch(pdfUrl);
        const pdfBlob = await response.blob();
        // 1???? 创建临时 URL（不是 Data URL）
        const url = URL.createObjectURL(pdfBlob);
        // 2???? 在 iframe 或特殊查看器中预览
        const iframe = document.createElement('iframe');
          iframe.src = url;
        document.body.appendChild(iframe);
        // 3???? 用户关闭后释放
        // URL.revokeObjectURL(url);
        }
        // 或者，将其转发到另一个服务
        asyncfunction forwardBlobToAnotherService(sourceUrl) {
        const response = await fetch(sourceUrl);
        const blob = await response.blob();
        const formData = new FormData();
          formData.append('file', blob);
        return fetch('/api/process', {
            method: 'POST',
            body: formData
          });
        }

为什么比 Data URL 好：

Object URL 不膨胀数据（不需要 Base64 编码）

浏览器内部优化，内存占用小

支持流式处理大文件

第四部分：大文件断点续传的底层逻辑

现在来到 Blob 和 File API 最实用的场景——如何高效地上传几百 MB 或几 GB 的文件。

核心思路：分片 + 并行 + 重传

大文件上传流程（完整版）
        ┌──────────────────────────────┐
        │    选择 1GB 文件             │
        └───────────────┬──────────────┘
                        │
                        ▼
            ┌───────────────────────┐
            │ 分割成 1MB 的 Chunks  │  ??─ 使用 Blob.slice()
            │ Chunk 1 / Chunk 2 ... │
            └───────────────┬───────┘
                            │
                ┌───────────┼───────────┐
                │           │           │
                ▼           ▼           ▼
           上传Chunk1   上传Chunk2   上传Chunk3  ??─ 并行上传（3个同时）
                │           │           │
                └───────────┼───────────┘
                            │
                            ▼
                  ┌─────────────────┐
                  │ 服务器校验MD5   │
                  │ 或验证分片完整性 │
                  └────────┬────────┘
                           │
                           ▼
                  ┌─────────────────┐
                  │ 服务器合并分片   │
                  │ 生成完整文件    │
                  └─────────────────┘

实现细节

class ResumableUploader {
        constructor(file, options = {}) {
            this.file = file;
            this.chunkSize = options.chunkSize || 1024 * 1024; // 默认 1MB
            this.concurrency = options.concurrency || 3;       // 并行数
            this.uploadedChunks = newSet();
            this.uploadUrl = options.uploadUrl;
          }
        // 分割文件
          *chunkGenerator() {
            let start = 0;
            while (start < this.file.size) {
              const end = Math.min(start + this.chunkSize, this.file.size);
              yield {
                index: Math.floor(start / this.chunkSize),
                blob: this.file.slice(start, end),
                start,
                end
              };
              start = end;
            }
          }
        // 上传单个分片
        async uploadChunk(chunk) {
            const formData = new FormData();
            formData.append('chunkIndex', chunk.index);
            formData.append('chunkBlob', chunk.blob);
            formData.append('fileId', this.file.lastModified); // 简单的文件标识
            try {
              const response = await fetch(this.uploadUrl, {
                method: 'POST',
                body: formData
              });
              if (response.ok) {
                this.uploadedChunks.add(chunk.index);
                returntrue;
              }
            } catch (error) {
              console.error(`分片 ${chunk.index} 上传失败:`, error);
              returnfalse;
            }
          }
        // 并行上传所有分片
        async uploadAll(onProgress) {
            const chunks = Array.from(this.chunkGenerator());
            let completed = 0;
            for (let i = 0; i < chunks.length; i += this.concurrency) {
              const batch = chunks.slice(i, i + this.concurrency);
              
              awaitPromise.all(
                batch.map(chunk =>this.uploadChunk(chunk))
              );
              completed += batch.length;
              onProgress?.(completed / chunks.length);
            }
            returnthis.uploadedChunks.size === chunks.length;
          }
        }
        // 使用示例
        const input = document.getElementById('fileInput');
        input.addEventListener('change', async (e) => {
        const file = e.target.files[0];
        const uploader = new ResumableUploader(file, {
            uploadUrl: '/api/upload-chunk',
            chunkSize: 1024 * 1024,    // 1MB
            concurrency: 3             // 同时上传 3 个分片
          });
          uploader.uploadAll((progress) => {
            console.log(`?? 上传进度: ${(progress * 100).toFixed(2)}%`);
          });
        });

关键点：

?? file.slice(start, end) 返回一个新的 Blob，不复制底层数据，只是引用

?? 即使文件是 5GB，分片操作也非常快（O(1)）

?? 在网络中断时，只需重传失败的分片，不需要重新上传整个文件

实际应用：字节跳动的云存储、阿里云的 OSS 上传工具，都基于这个原理。

第五部分：流式处理 — 突破内存限制

对于超大文件（如 1GB+ 视频），即使分片上传，单次读取仍可能撑爆内存。这时需要流式处理：

// 流式读取大文件，避免一次性加载
        asyncfunction streamLargeFile(file) {
        const stream = file.stream();
        const reader = stream.getReader();
        try {
            while (true) {
              const { value, done } = await reader.read();
              
              if (done) {
                console.log('?? 流式处理完成');
                break;
              }
              // value 是 Uint8Array，大小可控（通常 64KB）
              console.log(`?? 处理了 ${value.byteLength} 字节`);
              // 在这里处理每个数据块
              // 例如：上传、计算哈希、压缩等
            }
          } finally {
            reader.releaseLock();
          }
        }

与分片上传的区别：

分片是"我主动分割文件"（应用层）

流是"浏览器帮我分割数据读取"（系统层）

场景：

分片上传：需要用户控制块大小、并行度、错误重试

流式处理：处理无法一次性加载的超大文件

第六部分：安全性 — 浏览器的防线

很多人不知道，File 和 Blob API 的设计本身就内置了多层安全机制：

1. 沙箱隔离

// ?? 你无法做到的事情
        const files = await navigator.filesystem.getFile('/etc/passwd');  // 不存在此 API
        // ?? 你只能读取用户选择的文件
        input.addEventListener('change', (e) => {
          const file = e.target.files[0];  // 用户授权
        });

JavaScript 无法任意访问用户的文件系统。即使有恶意代码，也只能操作用户明确选择的文件。

2. 同源策略 + Object URL

// Object URL 有作用域限制
        const objectUrl = URL.createObjectURL(blob);
        // ?? 同一页面内可用
        const img = document.createElement('img');
        img.src = objectUrl;
        // ?? 跨域窗口无法访问
        window.open(objectUrl);  // 另一个窗口打开这个 URL，会被拒绝

Object URL 自动遵守同源策略，且生命周期受限于创建它的文档。

3. CORS 限制

// 如果尝试读取跨域的文件...
        fetch('https://another-domain.com/file.bin')
          .then(res => res.blob())
          .catch(err => {
            // ?? 没有 CORS 头会失败
            console.log('跨域失败');
          });

即使是 Blob，跨域限制仍然适用。

第七部分：常见陷阱与优化

陷阱 1：忘记释放 Object URL

// ?? 内存泄漏代码
        for (let i = 0; i < 1000; i++) {
        const url = URL.createObjectURL(new Blob(['data']));
        // 没有 revokeObjectURL，内存不断增长！
        }
        // ?? 正确做法
        for (let i = 0; i < 1000; i++) {
        const url = URL.createObjectURL(new Blob(['data']));
        // 使用...
          URL.revokeObjectURL(url);  // 及时释放
        }

陷阱 2：混淆 FileList 和数组

// ?? FileList 不是数组，不能直接使用数组方法
        const files = document.getElementById('input').files;
        files.map(file => upload(file));  // ?? FileList 没有 map 方法
        // ?? 转换为数组
        const filesArray = Array.from(files);
        filesArray.map(file => upload(file));  // ?? 正确

陷阱 3：Blob 的 MIME 类型问题

// ?? 常见错误：依赖浏览器猜测
        const blob = new Blob(['some data']);  // 默认 type 是 'application/octet-stream'
        // ?? 显式指定 type
        const textBlob = new Blob(['hello'], { type: 'text/plain' });
        const jsonBlob = new Blob([JSON.stringify(data)], { type: 'application/json' });
        const csvBlob = new Blob([csvContent], { type: 'text/csv;charset=utf-8' });

实战案例：完整的上传系统

最后，让我们整合所有知识，实现一个生产级别的文件上传系统（参考字节跳动、阿里云的实现思路）：

class ProductionFileUploader {
        constructor(options = {}) {
            this.chunkSize = options.chunkSize || 1024 * 1024; // 1MB
            this.maxConcurrency = options.maxConcurrency || 4;
            this.maxRetries = options.maxRetries || 3;
            this.uploadUrl = options.uploadUrl;
          }
        // 计算文件哈希（用于秒传和校验）
        async calculateFileHash(file) {
            const chunks = [];
            const chunkSize = 1024 * 1024; // 1MB
            
            let start = 0;
            while (start < file.size) {
              chunks.push(file.slice(start, start + chunkSize));
              start += chunkSize;
            }
            // 只取第一、中间、最后的分片计算哈希（快速模式）
            const samplesToHash = [
              chunks[0],
              chunks[Math.floor(chunks.length / 2)],
              chunks[chunks.length - 1],
              new Blob([file.name, file.size, file.lastModified])
            ];
            const hashInput = awaitPromise.all(
              samplesToHash.map(chunk => chunk.arrayBuffer())
            );
            // 简化版：用原生 crypto API
            const concatenated = newUint8Array(
              hashInput.reduce((acc, buf) => acc + buf.byteLength, 0)
            );
            let offset = 0;
            for (const buf of hashInput) {
              concatenated.set(newUint8Array(buf), offset);
              offset += buf.byteLength;
            }
            const hashBuffer = await crypto.subtle.digest('SHA-256', concatenated);
            returnArray.from(newUint8Array(hashBuffer))
              .map(b => b.toString(16).padStart(2, '0'))
              .join('');
          }
        // 上传前检查服务器是否已有该文件（秒传）
        async checkExist(fileHash) {
            const response = await fetch(`${this.uploadUrl}/check`, {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify({ fileHash })
            });
            const data = await response.json();
            return data.exists;  // 返回 true 则秒传成功
          }
        // 分片上传（带重试机制）
        async uploadChunkWithRetry(chunk, retryCount = 0) {
            try {
              const formData = new FormData();
              formData.append('chunkIndex', chunk.index);
              formData.append('chunkBlob', chunk.blob);
              formData.append('fileId', chunk.fileId);
              formData.append('totalChunks', chunk.totalChunks);
              const response = await fetch(this.uploadUrl, {
                method: 'POST',
                body: formData
              });
              if (!response.ok) {
                thrownewError(`HTTP ${response.status}`);
              }
              return { success: true, index: chunk.index };
            } catch (error) {
              if (retryCount < this.maxRetries) {
                // 指数退避重试
                awaitnewPromise(resolve =>
                  setTimeout(resolve, Math.pow(2, retryCount) * 1000)
                );
                returnthis.uploadChunkWithRetry(chunk, retryCount + 1);
              }
              return { success: false, index: chunk.index, error };
            }
          }
        // 完整上传流程
        async upload(file, onProgress) {
            // 步骤 1：计算哈希
            console.log('?? 计算文件哈希...');
            const fileHash = awaitthis.calculateFileHash(file);
            // 步骤 2：检查秒传
            console.log('?? 检查秒传...');
            if (awaitthis.checkExist(fileHash)) {
              console.log('?? 服务器已有该文件，秒传成功！');
              onProgress?.(1);
              return { success: true, type: 'instant' };
            }
            // 步骤 3：分片上传
            console.log('?? 开始分片上传...');
            const chunks = this.generateChunks(file, fileHash);
            const uploadQueue = [...chunks];
            let completed = 0;
            let uploading = 0;
            const failed = [];
            returnnewPromise((resolve) => {
              const processNext = async () => {
                if (uploadQueue.length === 0 && uploading === 0) {
                  if (failed.length === 0) {
                    resolve({ success: true, type: 'chunked', hash: fileHash });
                  } else {
                    resolve({ success: false, failed });
                  }
                  return;
                }
                while (uploading < this.maxConcurrency && uploadQueue.length > 0) {
                  uploading++;
                  const chunk = uploadQueue.shift();
                  this.uploadChunkWithRetry(chunk).then(result => {
                    uploading--;
                    if (result.success) {
                      completed++;
                    } else {
                      failed.push(result.index);
                    }
                    onProgress?.(completed / chunks.length);
                    processNext();
                  });
                }
              };
              processNext();
            });
          }
        // 生成分片
          generateChunks(file, fileId) {
            const chunks = [];
            const totalChunks = Math.ceil(file.size / this.chunkSize);
            for (let i = 0; i < totalChunks; i++) {
              const start = i * this.chunkSize;
              const end = Math.min(start + this.chunkSize, file.size);
              chunks.push({
                index: i,
                blob: file.slice(start, end),
                fileId,
                totalChunks
              });
            }
            return chunks;
          }
        }
        // 使用示例
        const uploader = new ProductionFileUploader({
        uploadUrl: '/api/upload',
        chunkSize: 1024 * 1024,  // 1MB
        maxConcurrency: 4,
        maxRetries: 3
        });
        document.getElementById('fileInput').addEventListener('change', async (e) => {
        const file = e.target.files[0];
        const result = await uploader.upload(file, (progress) => {
            console.log(`?? 上传进度: ${(progress * 100).toFixed(2)}%`);
          });
        if (result.success) {
            console.log('?? 上传成功', result);
          } else {
            console.error('?? 上传失败', result);
          }
        });

深度对比：何时用 File API，何时用其他方案

┌─────────────────────────────────────────────────────────┐
        │  场景分析：选择合适的文件处理方案                       │
        ├──────────────┬──────────────────────────────────────────┤
        │ 场景         │ 推荐方案                                 │
        ├──────────────┼──────────────────────────────────────────┤
        │ 小文件上传   │ FormData + File                         │
        │ (<5MB)       │ 直接POST，简单高效                     │
        ├──────────────┼──────────────────────────────────────────┤
        │ 大文件上传   │ 分片 + 并行 + 断点续传                 │
        │ (>100MB)     │ 使用 Blob.slice() + 并发控制            │
        ├──────────────┼──────────────────────────────────────────┤
        │ 超大文件     │ 流式处理 + 分片                         │
        │ (>1GB)       │ file.stream() + chunk 上传              │
        ├──────────────┼──────────────────────────────────────────┤
        │ 客户端生成   │ Blob + Object URL                      │
        │ 数据导出     │ CSV/JSON/PDF 生成后下载                 │
        ├──────────────┼──────────────────────────────────────────┤
        │ 图片预览     │ Object URL（绝不用 Data URL）           │
        │ （任意大小） │ 性能差 33% 会崩溃                      │
        ├──────────────┼──────────────────────────────────────────┤
        │ 二进制处理   │ ArrayBuffer + TypedArray              │
        │ 加密/压缩    │ Crypto API 或第三方库结合              │
        ├──────────────┼──────────────────────────────────────────┤
        │ 离线存储     │ IndexedDB + Blob                       │
        │ 数据同步     │ 配合 Service Worker                    │
        └──────────────┴──────────────────────────────────────────┘

总结：为什么要深度理解 File 和 Blob

性能优化：Object URL vs Data URL，性能差异 30%+

内存管理：Blob.slice() 不复制数据，处理 GB 级文件不会卡顿

架构设计：客户端处理，减少服务器压力（字节跳动的经验）

安全隐患：Object URL 泄漏会导致跨域访问，需要及时释放

用户体验：断点续传 + 秒传，让大文件上传"感觉很快"

很多前端工程师觉得这些 API"太基础"而忽略，但真正的竞争力在于细节。掌握 File 和 Blob，你就掌握了：

?? 如何优化百 MB 级别的网络传输

?? 如何在内存受限的设备上处理大数据

?? 如何构建生产级别的云存储前端

?? 如何给用户提供闪电般的上传体验

常见问题解答

Q：为什么不用 Fetch 的 `upload` 模式？

A： Fetch 目前没有原生的 upload 进度回调，只能用 XMLHttpRequest。对于分片上传，你需要自己控制并发和重试逻辑，这恰好是我们上面实现的。

Q：Object URL 和 Data URL 有什么本质区别？

A：

Data URL：整个内容编码为字符串，占用内存大、字符串膨胀 33%、不适合大文件

Object URL：浏览器内部引用，占用内存小、性能高、适合任何大小的 Blob

Q：File 和 Blob 的内存什么时候释放？

A：

Blob：当没有引用时，垃圾回收自动清理

Object URL：必须显式调用 URL.revokeObjectURL() 释放，否则内存泄漏

Q：如何在离线状态下保存大文件？

A：使用 IndexedDB 配合 Blob 存储：

const db = await openDB('myapp');
        const tx = db.transaction('files', 'readwrite');
        await tx.objectStore('files').add({ name: 'data', blob: largeBlob });

Q：Blob 可以跨域上传吗？

A：可以，Blob 本身不受 CORS 限制，但取决于服务器 API 的 CORS 策略。

原文链接：https://mp.weixin.qq.com/s/tTmc1pEdWiGhT43KBfcUzA

标签 Debian 12

Debian 12+安装LNMP一键安装包MySQL失败的解决

博客分类

最近的帖子

Debian 12+安装LNMP一键安装包MySQL失败的解决

理解 Vue 自定义指令(从 click开始)

你真的理解 File 和 Blob 吗？

RESTful API 设计规范详解

JetBrains新版本区域选择的坑

简化版图片特征提取与相似搜索方案

热门标签

订阅